<template>
  <div class="galary">
    <ly-tab
        v-model="selectedId"
        :items="items"
        class="tabColor"
        :options="options"
        @change="handleClick"
        >
    </ly-tab>
    <div class="cate">
      <span>全部</span>
      <span>其他</span>
    </div>   <!-- 默认显示的是type:'galaryContent',可以通过改变type的值来改变渲染的组件 -->
    <component 
    :is="type"
    :imgList="imgList"
    ></component>  
  </div>
</template>

<script>
import galaryContent from './galaryContent'
export default {
  name: 'detailGalary',
  props:{
   // galaryList:Array,
    imgList:Array
  },
  data () {
    return {
      type:'galaryContent',
      galaryList:[
        '天下第一福地楼观台',
        '赵公明财神庙',
        '曲江周至水街',
        '曲江国际会展中心',
      ],
      selectedId: 0,
      items: [],
      options: {
        activeColor: '#1d98bd',
        // 可在这里指定labelKey为你数据里文字对应的字段

      },
    }
  },
  methods:{
    handleClick(item,index){
      //console.log(index)
      //index就是点击的内容，第一个就是0，第二个就是1
      this.$store.state.index = index
    }
  },
  components:{
    galaryContent  //注册动态子组件
  },
  computed:{
    loopGalaryList(){
      for (let i=0;i<this.galaryList.length;i++){
        let item = {label:this.galaryList[i]}
        this.items.push(item)
      }
    }
  },
  mounted(){
    this.loopGalaryList
  }
}
</script>

<style lang="stylus" scoped>
.galary
  position:absolute
  top:.88rem
  left:0
  right:0
  bottom:0
  color:#fff
  z-index:100
  background:#fff
  .galary>a
    color:#000
  .tabColor
    background:#fff
    border-color:#fff
  .cate
    background:#edf0f5
    line-height:.6rem
    color:#000
  .cate > span
    margin-left:.22rem
    font-size:.3rem
  .wrapper
    background:#fff
    .imgWrapper
      width:47%
      background:red
      margin:.12rem
      float:left
    .imgWrapper > img
      width:100%
</style>
